<template>
  <div class="join-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="gradient-text">加入我们</h1>
        <p>选拔最优秀的你，共同守护国旗尊严</p>
      </div>
    </div>

    <!-- 导航标签 -->
    <div class="section-container">
      <el-tabs v-model="activeTab" class="custom-tabs">
        <!-- 招募简章 -->
        <el-tab-pane label="招募简章" name="recruitment">
          <div class="recruitment-content">
            <div class="requirements glass-effect">
              <h2 class="gradient-text">招募要求</h2>
              <div class="requirements-grid">
                <div class="requirement-item" v-for="req in requirements" :key="req.id">
                  <i :class="req.icon"></i>
                  <h3>{{ req.title }}</h3>
                  <p>{{ req.description }}</p>
                </div>
              </div>
            </div>

            <div class="process glass-effect">
              <h2 class="gradient-text">招募流程</h2>
              <el-steps :active="4" align-center>
                <el-step v-for="step in recruitmentSteps" 
                        :key="step.id"
                        :title="step.title"
                        :description="step.description">
                </el-step>
              </el-steps>
            </div>
          </div>
        </el-tab-pane>

        <!-- 培训计划 -->
        <el-tab-pane label="培训计划" name="training">
          <div class="training-content">
            <div class="training-phases">
              <div class="phase-card glass-effect" v-for="phase in trainingPhases" :key="phase.id">
                <div class="phase-header">
                  <i :class="phase.icon"></i>
                  <h3>{{ phase.title }}</h3>
                </div>
                <div class="phase-content">
                  <p class="phase-desc">{{ phase.description }}</p>
                  <ul class="phase-details">
                    <li v-for="(detail, index) in phase.details" :key="index">
                      {{ detail }}
                    </li>
                  </ul>
                </div>
                <div class="phase-duration">
                  <i class="el-icon-time"></i>
                  <span>{{ phase.duration }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 报名通道 -->
        <el-tab-pane label="报名通道" name="apply">
          <div class="apply-content">
            <div class="apply-info glass-effect">
              <h2 class="gradient-text">报名信息</h2>
              <div class="info-grid">
                <div class="info-item">
                  <i class="el-icon-date"></i>
                  <h3>报名时间</h3>
                  <p>2024年3月1日 - 3月15日</p>
                </div>
                <div class="info-item">
                  <i class="el-icon-user"></i>
                  <h3>招募人数</h3>
                  <p>计划招募50人</p>
                </div>
                <div class="info-item">
                  <i class="el-icon-location"></i>
                  <h3>面试地点</h3>
                  <p>大学生活动中心305室</p>
                </div>
              </div>
            </div>

            <div class="apply-form glass-effect">
              <h2 class="gradient-text">报名表单</h2>
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="姓名">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="学院">
                  <el-input v-model="form.college"></el-input>
                </el-form-item>
                <el-form-item label="年级">
                  <el-select v-model="form.grade" placeholder="请选择年级">
                    <el-option label="大一" value="freshman"></el-option>
                    <el-option label="大二" value="sophomore"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input v-model="form.contact"></el-input>
                </el-form-item>
                <el-form-item label="自我介绍">
                  <el-input type="textarea" v-model="form.introduction"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" class="gradient-btn" @click="submitForm">提交申请</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JoinPage',
  data() {
    return {
      activeTab: 'recruitment',
      requirements: [
        {
          id: 1,
          icon: 'el-icon-user',
          title: '身体条件',
          description: '身高要求：男生170cm以上，女生160cm以上；体型匀称，五官端正'
        },
        {
          id: 2,
          icon: 'el-icon-medal',
          title: '政治素质',
          description: '热爱祖国，思想端正，品行优良，无违纪违法记录'
        },
        {
          id: 3,
          icon: 'el-icon-notebook-2',
          title: '学习成绩',
          description: '学习成绩良好，无挂科记录，具有良好的时间管理能力'
        },
        {
          id: 4,
          icon: 'el-icon-coordinate',
          title: '组织纪律',
          description: '遵守组织纪律，具有良好的组织观念和集体意识'
        }
      ],
      recruitmentSteps: [
        {
          id: 1,
          title: '提交申请',
          description: '填写报名表'
        },
        {
          id: 2,
          title: '资格审核',
          description: '审核基本条件'
        },
        {
          id: 3,
          title: '面试选拔',
          description: '综合素质考核'
        },
        {
          id: 4,
          title: '培训考核',
          description: '为期两周的培训'
        }
      ],
      trainingPhases: [
        {
          id: 1,
          icon: 'el-icon-reading',
          title: '理论学习',
          description: '了解国旗护卫队的历史、使命和基本要求',
          details: [
            '国旗护卫队发展历程',
            '队列基本知识',
            '礼仪规范学习'
          ],
          duration: '3天'
        },
        {
          id: 2,
          icon: 'el-icon-position',
          title: '基础训练',
          description: '掌握基本的队列动作和礼仪要求',
          details: [
            '立正稍息训练',
            '步伐动作训练',
            '转体动作训练'
          ],
          duration: '5天'
        },
        {
          id: 3,
          icon: 'el-icon-flag',
          title: '升旗训练',
          description: '学习升降旗技能和礼仪要求',
          details: [
            '升旗动作训练',
            '护旗队形训练',
            '礼仪规范训练'
          ],
          duration: '6天'
        }
      ],
      form: {
        name: '',
        college: '',
        grade: '',
        contact: '',
        introduction: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$message({
        message: '申请提交成功！我们会尽快联系您。',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.join-page {
  min-height: calc(100vh - var(--header-height));
}

.page-header {
  height: 300px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 招募要求样式 */
.requirements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.requirement-item {
  text-align: center;
  padding: 30px;
}

.requirement-item i {
  font-size: 48px;
  margin-bottom: 20px;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 培训阶段样式 */
.training-phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.phase-card {
  padding: 30px;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.phase-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.phase-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.phase-header i {
  font-size: 32px;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.phase-content {
  margin: 20px 0;
}

.phase-desc {
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.phase-details {
  list-style: none;
  padding: 0;
}

.phase-details li {
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
  color: var(--text-secondary);
}

.phase-details li::before {
  content: '•';
  color: #6366f1;
  position: absolute;
  left: 0;
}

.phase-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  margin-top: 20px;
}

/* 报名信息样式 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

.info-item {
  text-align: center;
  padding: 20px;
}

.info-item i {
  font-size: 36px;
  margin-bottom: 15px;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 表单样式 */
.apply-form {
  max-width: 600px;
  margin: 40px auto;
  padding: 40px;
  border-radius: var(--radius-md);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(99, 102, 241, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    height: 200px;
  }
  
  .requirements-grid,
  .training-phases,
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .apply-form {
    padding: 20px;
  }
}
</style> 